<template>
  <view class="search-bar-wrapper">
    <view class="search-bar">
      <!-- 填充区 -->
      <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px'}">
        <!-- 顶部填充区 -->
      </view>
      <view class="titleBar" :style="{ height: getTitleBarHeight() + 'px' }">
        <text class="search-text">搜索</text>
        <view class="search-input">
          <uni-icons type="search" size="16" color="#666"></uni-icons>
          <input 
            type="text" 
            :value="modelValue"
            placeholder="请输入接种点"
            @confirm="onInput"
          />
        </view>
      </view>
    </view>
    <!-- 占位元素，用于固定定位时的空间填充 -->
    <view class="fill" :style="{ height: getFillHeight() + 'px'}">
      <!-- 该填充区域是为了解决搜索框固定定位覆盖掉banner的问题,用来填充高度的;固定定位只有navBar其他的不是 -->
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getStatusBarHeight, getTitleBarHeight, getFillHeight } from '@/utils/system'

const modelValue = ref('')
// 定义事件
const emit = defineEmits(['search'])

// 回车事件处理
const onInput = (e) => {
  modelValue.value = e.detail.value
  emit('search', modelValue.value)
}
</script>

<style lang="scss">
.search-bar-wrapper{
	.search-bar {
	  width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
		background:
			linear-gradient(to bottom,transparent,$uni-bg-color 1200rpx),
			linear-gradient(to right,#beecd8 20%,#F4E2D8);
		.titleBar {
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      .search-text{
        font-size: 32rpx;
        font-weight: 600;
        color: $uni-text-color;
        margin-right: 20rpx;
        line-height: 1;
      }
      .search-input {
        display: flex;
        align-items: center;
        background-color: $uni-bg-color-grey;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        flex: 1;
        
        input {
          flex: 1;
          margin-left: 20rpx;
          font-size: 28rpx;
        }
      }
    }
	}
}
</style> 